<!DOCTYPE html>
<html>
<head>
	<title>HTML5移动Web开发实践pdf</title>
	<meta charset="utf-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
  body {
    margin:0; 
    padding:0;
    background:#fff;
  }

	.chapters{
		display: inline-block;
		width: 30%;
		border:1px solid #ddd;
		padding: 10px;
	}

  @media screen and (max-width: 768px) {
	.chapters{
		width: 80%;
		margin-left: 10%;
	}

  }
  .text-center{
  	text-align: center;
  }
  </style>
  </head>
  <body>
    <div id="container">
      <header>
		<h3 class="text-center">HTML5移动Web开发实战整理</h3>
      </header>
      
      <div id="main">
        <section class="chapters text-center">
      			<h5 class="text-center">第一章 HTML5与移动网站</h5>
      			<p class="text-center"> <a href="ch01/1.html">适应宽度</a></p>
      			<p class="text-center"> <a href="ch01/2.html">网页viewport</a></p>
      			<p class="text-center"> <a href="ch01/3.html">固定宽度</a></p>
      			<p class="text-center"> <a href="ch01/4.html">百分比适配移动端</a></p>
      			<p class="text-center"> <a href="ch01/5.html">modernizr检测浏览器功能</a></p>
            <p class="text-center"> &nbsp;</p>
        </section>
        <section class="chapters text-center">
    			<h5 class="text-center">第二章 移动端的配置和优化</h5>
    			<p class="text-center"> <a href="ch02/1.html">图标使用</a></p>
    			<p class="text-center"> <a href="ch02/2.html">避免文字大小重置</a></p>
    			<p class="text-center"> <a href="ch02/3.html">修复移动版Safari的re-flow scale问题</a></p>
    			<p class="text-center"> <a href="ch02/4.html">启动图片</a></p>
    			<p class="text-center"> <a href="ch02/5.html">外部链接</a></p>
           <p class="text-center"> &nbsp;</p>
        </section>
        <section class="chapters text-center">
          <h5 class="text-center">第三章 移动设备的交互方式</h5>
          <p class="text-center"> <a href="ch03/1.html">利用触控来移动页面元素</a></p>
          <p class="text-center"> <a href="ch03/2.html">锁定页面为横屏模式</a></p>
          <p class="text-center"> <a href="ch03/3.html">检测和处理横屏切换</a></p>
          <p class="text-center"> <a href="ch03/4.html">利用手势旋转页面元素</a></p>
          <p class="text-center"> <a href="ch03/5.html">利用滑动创建图库</a></p>
          <p class="text-center"> <a href="ch03/6.html">手势放大缩小</a></p>
        </section>
        <section class="chapters text-center">
          <h5 class="text-center">第四章 快速构建移动响应式移动互联网站点</h5>
          <p class="text-center"> <a href="ch04/1.html">渐变目录导航</a></p>
          <p class="text-center"> <a href="ch04/2.html">modernizr判断选择加载js</a></p>
          <p class="text-center"> <a href="ch04/3.html">获取经纬度</a></p>
          <p class="text-center"> <a href="ch04/4.html">输入框自动伸缩</a></p>
          <p class="text-center"> <a href="ch04/5.html">快速响应按钮</a></p>
          <p class="text-center"> <a href="ch04/6.html">隐藏浏览器地址栏</a></p>

        </section>
        <section class="chapters text-center">
          <h5 class="text-center">第五章 移动设备访问</h5>
          <p class="text-center"> <a href="ch05/1.html">获取位置信息</a></p>
          <p class="text-center"> <a href="ch05/2.html">跨浏览器定位</a></p>
          <p class="text-center"> <a href="ch05/3.html">基于地理信息显示地图</a></p>
          <p class="text-center"> <a href="ch05/4.html">实时显示地理位置</a></p>
          <p class="text-center"> <a href="ch05/5.html">使用DeviceOrientation事件</a></p>
           <p class="text-center"> &nbsp;</p>

        </section>
        <section class="chapters text-center">
          <h5 class="text-center">第六章 移动富媒体</h5>
          <p class="text-center"> <a href="ch06/1.html">移动设备商播放音频</a></p>
          <p class="text-center"> <a href="ch06/2.html">移动设备商播放视频</a></p>
          <p class="text-center"> <a href="ch06/3.html">使用离线缓存</a></p>
          <p class="text-center"> <a href="ch06/4.html">使用网络存储(Web Storage)</a><a href="ch04/4.1.html">html5Tweets网络存储</a></p>
          <p class="text-center"> <a href="ch06/5.html">使用Web Workers</a></p>
          <p class="text-center"> <a href="ch06/6.html">使用Session和historyAPI构建类Flash的导航</a></p>
        </section>
<!--         <section class="chapters text-center">
  <h5 class="text-center">第七章 移动设备调试</h5>
  <p class="text-center"> <a href="ch07/1.html">使用Opera Dragonfly远程调试</a></p>
  <p class="text-center"> <a href="ch07/2.html">使用weinre远程调试</a></p>
  <p class="text-center"> <a href="ch07/3.html">在移动设备上Firebug</a></p>
  <p class="text-center"> <a href="ch07/4.html">使用JS Console远程调试</a></p>
  <p class="text-center"> <a href="ch07/5.html">配置移动断Safari调试</a></p>
   <p class="text-center"> &nbsp;</p>
</section> -->
        <section class="chapters text-center">
          <h5 class="text-center">第十章 拥抱移动互联网特性</h5>
          <p class="text-center"> <a href="ch10/1.html">window.onerror</a></p>
          <p class="text-center"> <a href="ch10/2.html">使用ECMAScript5中的新方法</a></p>
          <p class="text-center"> <a href="ch10/3.html">HTML5中新的输入类型</a></p>
          <p class="text-center"> <a href="ch10/4.html">HTML中内嵌SVG</a></p>
          <p class="text-center"> <a href="ch10/5.html">配置移动断Safari调试</a></p>
           <p class="text-center"> &nbsp;</p>
        </section>
      </div>
      
      <footer>
      </footer>
    </div>
  </body>
</html>